<template>
  <div>
    <cus-modal
      class="standardNutrientModal"
      ref="modal"
      width="1280"
      :title="form.name"
      okBtnName="关闭"
      :showCancelBtn="false"
      @onOk="$refs.modal.show = false"
    >
      <div style="display: flex; justify-content: center;">
        <Form
          ref="formValidate"
          :model="form"
          class="itemBox" label-position="top"
          style="display: flex; flex-wrap: wrap; justify-content: space-between; width:1200px;"
        >
          <FormItem class="itemBox" label="可食部">
            <Input readonly v-model="form.eatable" clearable maxlength="20">
              <span slot="append">%</span></Input
            >
          </FormItem>
          <FormItem class="itemBox" label="水分含量">
            <Input readonly v-model="form.water" clearable maxlength="20">
              <span slot="append">克</span></Input
            >
          </FormItem>
          <FormItem class="itemBox" label="能量">
            <Input readonly v-model="form.energy" clearable maxlength="20">
              <span slot="append">千卡</span></Input
            >
          </FormItem>
          <FormItem class="itemBox" label="蛋白质">
            <Input readonly v-model="form.pr" clearable maxlength="20">
              <span slot="append">克</span></Input
            >
          </FormItem>
          <FormItem class="itemBox" label="脂肪">
            <Input readonly v-model="form.fat" clearable maxlength="20">
              <span slot="append">克</span></Input
            >
          </FormItem>
          <FormItem class="itemBox" label="碳水化合物">
            <Input readonly v-model="form.carbohydrate" clearable maxlength="20">
              <span slot="append">克</span></Input
            >
          </FormItem>
          <FormItem class="itemBox" label="膳食纤维">
            <Input readonly v-model="form.dietaryFiber" clearable maxlength="20">
              <span slot="append">克</span></Input
            >
          </FormItem>
          <FormItem class="itemBox" label="胆固醇">
            <Input readonly v-model="form.cholesterol" clearable maxlength="20">
              <span slot="append">毫克</span></Input
            >
          </FormItem>
          <FormItem class="itemBox" label="灰分">
            <Input readonly v-model="form.ash" clearable maxlength="20">
              <span slot="append">克</span></Input
            >
          </FormItem>
          <FormItem class="itemBox" label="维A">
            <Input readonly v-model="form.va" clearable maxlength="20">
              <span slot="append">微克</span></Input
            >
          </FormItem>
          <FormItem class="itemBox" label="维B1">
            <Input readonly v-model="form.vb1" clearable maxlength="20">
              <span slot="append">毫克</span></Input
            >
          </FormItem>
          <FormItem class="itemBox" label="维B2">
            <Input readonly v-model="form.vb2" clearable maxlength="20">
              <span slot="append">微克</span></Input
            >
          </FormItem>
          <FormItem class="itemBox" label="维pp">
            <Input readonly v-model="form.vpp" clearable maxlength="20">
              <span slot="append">微克</span></Input
            >
          </FormItem>
          <FormItem class="itemBox" label="叶酸">
            <Input readonly v-model="form.folacin" clearable maxlength="20">
              <span slot="append">微克</span></Input
            >
          </FormItem>
          <FormItem class="itemBox" label="维C">
            <Input readonly v-model="form.vc" clearable maxlength="20">
              <span slot="append">微克</span></Input
            >
          </FormItem>
          <FormItem class="itemBox" label="维E">
            <Input readonly v-model="form.ve" clearable maxlength="20">
              <span slot="append">毫克</span></Input
            >
          </FormItem>
          <FormItem class="itemBox" label="钙">
            <Input readonly v-model="form.calcium" clearable maxlength="20">
              <span slot="append">毫克</span></Input
            >
          </FormItem>
          <FormItem class="itemBox" label="磷">
            <Input readonly v-model="form.phosphorus" clearable maxlength="20">
              <span slot="append">毫克</span></Input
            >
          </FormItem>
          <FormItem class="itemBox" label="钾">
            <Input readonly v-model="form.potassium" clearable maxlength="20">
              <span slot="append">毫克</span></Input
            >
          </FormItem>
          <FormItem class="itemBox" label="钠">
            <Input readonly v-model="form.sodium" clearable maxlength="20">
              <span slot="append">毫克</span></Input
            >
          </FormItem>
          <FormItem class="itemBox" label="镁">
            <Input readonly v-model="form.magnesium" clearable maxlength="20">
              <span slot="append">毫克</span></Input
            >
          </FormItem>
          <FormItem class="itemBox" label="铁">
            <Input readonly v-model="form.iron" clearable maxlength="20">
              <span slot="append">毫克</span></Input
            >
          </FormItem>
          <FormItem class="itemBox" label="锌">
            <Input readonly v-model="form.zinc" clearable maxlength="20">
              <span slot="append">毫克</span></Input
            >
          </FormItem>
          <FormItem class="itemBox" label="硒">
            <Input readonly v-model="form.selenium" clearable maxlength="20">
              <span slot="append">微克</span></Input
            >
          </FormItem>
          <FormItem class="itemBox" label="铜">
            <Input readonly v-model="form.copper" clearable maxlength="20">
              <span slot="append">毫克</span></Input
            >
          </FormItem>
          <FormItem class="itemBox" label="锰">
            <Input readonly v-model="form.manganese" clearable maxlength="20">
              <span slot="append">毫克</span></Input
            >
          </FormItem>
          <FormItem class="itemBox" label="碘">
            <Input readonly v-model="form.iodine" clearable maxlength="20">
              <span slot="append">微克</span></Input
            >
          </FormItem>
          <FormItem class="itemBox" label="异亮氨酸">
            <Input
             readonly
              v-model="form.abnormallyHighArginine"
              clearable maxlength="20"
            >
              <span slot="append">毫克</span></Input
            >
          </FormItem>
          <FormItem class="itemBox" label="亮氨酸">
            <Input
             readonly
              v-model="form.leucineGlycylglycine"
              clearable maxlength="20"
            >
              <span slot="append">毫克</span></Input
            >
          </FormItem>
          <FormItem class="itemBox" label="赖氨酸">
            <Input readonly v-model="form.lysine" clearable maxlength="20">
              <span slot="append">毫克</span></Input
            >
          </FormItem>
          <FormItem class="itemBox" label="蛋氨酸">
            <Input readonly v-model="form.met" clearable maxlength="20">
              <span slot="append">毫克</span></Input
            >
          </FormItem>
          <FormItem class="itemBox" label="苯丙氨酸">
            <Input readonly v-model="form.phenylalanine" clearable maxlength="20">
              <span slot="append">毫克</span></Input
            >
          </FormItem>
          <FormItem class="itemBox" label="苏氨酸">
            <Input readonly v-model="form.threonine" clearable maxlength="20">
              <span slot="append">毫克</span></Input
            >
          </FormItem>
          <FormItem class="itemBox" label="色氨酸">
            <Input readonly v-model="form.tryptophan" clearable maxlength="20">
              <span slot="append">毫克</span></Input
            >
          </FormItem>
          <FormItem class="itemBox" label="组氨酸">
            <Input readonly v-model="form.histidine" clearable maxlength="20">
              <span slot="append">毫克</span></Input
            >
          </FormItem>
          <FormItem class="itemBox" label="总脂肪酸">
            <Input readonly v-model="form.totalFattyAcids" clearable maxlength="20">
              <span slot="append">毫克</span></Input
            >
          </FormItem>
          <FormItem class="itemBox" label="饱和脂肪酸">
            <Input
             readonly
              v-model="form.saturatedFattyAcid"
              clearable maxlength="20"
            >
              <span slot="append">毫克</span></Input
            >
          </FormItem>
          <FormItem class="itemBox" label="单不饱和脂肪酸">
            <Input readonly v-model="form.monounsaturated" clearable maxlength="20">
              <span slot="append">毫克</span></Input
            >
          </FormItem>
          <FormItem class="itemBox" label="多和脂肪酸">
            <Input readonly v-model="form.polyunsaturated" clearable maxlength="20">
              <span slot="append">毫克</span></Input
            >
          </FormItem>
          <FormItem class="itemBox" label="未知脂肪酸">
            <Input
             readonly
              v-model="form.unknownFattyAcids"
              clearable maxlength="20"
            >
              <span slot="append">毫克</span></Input
            >
          </FormItem>
        </Form>
        <Spin size="large" fix v-if="loading"></Spin>
      </div>
    </cus-modal>
  </div>
</template>

<script>
const form = {
  name: "", //原料名称
  eatable: "", //可食部分比
  water: "", //水分
  energy: "", //能量
  pr: "", //蛋白质
  fat: "", //脂肪
  carbohydrate: "", //碳水化合物
  dietaryFiber: "", //膳食纤维
  cholesterol: "", //胆固醇
  ash: "", //灰分
  va: "", //维生素a
  vb1: "", //维生素b1
  vb2: "", //维生素b2
  vpp: "", //维pp
  folacin: "", //叶酸
  vc: "", //VC
  ve: "", //VE
  calcium: "", //钙
  phosphorus: "", //磷
  potassium: "", //钾
  sodium: "", //钠
  magnesium: "", //镁
  iron: "", //铁
  zinc: "", //锌
  selenium: "", //硒
  copper: "", //铜
  manganese: "", //锰
  iodine: "", //碘
  abnormallyHighArginine: "", //异高氨酸(g)
  leucineGlycylglycine: "", //亮氨酸(g)
  lysine: "", //赖氨酸(g)
  met: "", //蛋氨酸(g)
  phenylalanine: "", //苯丙氨酸(g)
  threonine: "", //苏氨酸(g)
  tryptophan: "", //色氨酸(g)
  valine: "", //缬氨酸(g)
  histidine: "", //组胺酸(g)
  totalFattyAcids: "", //总脂肪酸(g)
  saturatedFattyAcid: "", //饱和脂肪酸(g)
  monounsaturated: "", //单不饱和脂肪酸(g)
  polyunsaturated: "", //多不饱和脂肪酸(g)
  unknownFattyAcids: "", //未知脂肪酸(g)
};

export default {
  name: "standardNutrientModal",
  data() {
    return {
      loading: false,
      ruleValidate: {},
      form: form,
    };
  },
  mounted() {},
  methods: {
    show(v) {
      this.loading = false;
      this.$refs["modal"].show = true;
      this.form = v;
    },
  },
};
</script>

<style scoped lang="scss">
.itemBox {
  width: 118px;
  padding: 0 10px;
}
</style>
